<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <title>主题生成PPT</title>
    <link rel="stylesheet" href="../../../css/mui.min.css" />
    <script src="../../../js/mui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../../../css/app.css" />
    <link rel="stylesheet" href="../../../npl/css/vant.mini.css" />
    <script src="../../../js/jquery-3.6.0.min.js"></script>
    <script src="../../../js/flexible.js"></script>
    <script src="../../../js/vue.js"></script>
    <script src="../../../js/sm2.js"></script>
    <script src="../../../js/sm3.js"></script>
    <script src="../../../js/clipboard.js"></script>
    <script src="../../../npl/js/vant.mini.js"></script>
    <script src="../../../js/vconsole.min.js"></script>
    <script src="../../text.js" type="text/javascript"></script>

    <link rel="stylesheet" href="../css/github-markdown.css" />
    <link rel="stylesheet" href="../css/ppt.css" />
    <!-- <link rel="stylesheet" href="../js/bootstrap/bootstrap.min.css" /> -->

    <script src="../js/marked.min.js" type="text/javascript"></script>
    <script src="../js/turndown.js" type="text/javascript"></script>
    <script src="../js/util.js" type="text/javascript"></script>
    <script src="../js/stream.js"></script>
    <script src="../js/streamMsg.js"></script>
    <script src="../js/multiBtn.js"></script>

    <style scoped>

    </style>
</head>

<body class="program-body">
    <div id="app" v-cloak>
        <multi-btn :changeable="changeMultiBtn"></multi-btn>
        <div class="is-loading">
            <div class="curtain">
                <div class="loadingBgc">
                    <div class="loader"></div>
                </div>
            </div>
        </div>
        <div class="trainTickets program-main" style="height: calc(100% - 20px)">
            <div class="header_tit" style="height: 100%;">
                <van-nav-bar title="主题生成PPT" :border=false left-arrow>
                    <template #left>
                        <div class="back_l" @click="home()">
                            <img src="../../../image/left.png" alt="" />
                        </div>
                    </template>
                </van-nav-bar>
                <!-- 生成大纲 -->
                <div v-if="currentStep == 1 && outLineContent == ''" class="step1">
                    <!-- 主题 -->
                    <div class="subject" >
                        <div class="field-label">
                            <span class="tit_text">文件标题</span><span class="first_span_img">*</span>
                        </div>
                        <div class="subject-title">
                            <input id="voiceSubjectTitle" :readonly="2==voiceType" class="subject-input" placeholder="示例：智慧办公项目启动会" v-model="subjectTitle" />
                            <div class="img-div active-brightness" v-if="2!=voiceType" @click="startTalk(2)">
                                <img class="subject-voice" src="../images/write/voice-play.png"/>
                            </div>
                            <div class="img-div active-brightness" v-if="2==voiceType" @click="stopTalk(2)">
                                <img class="subject-voice" src="../images/write/stop.png"/>
                            </div>
                        </div>
                    </div>
                    <!-- 参考文件 -->
                    <!-- <div class="subject">
                        <div class="field-label">
                            <span class="tit_text">要求</span><span class="first_span_img">*</span>
                        </div>
                        <div class="subject-title">
                            <input id="voiceSubjectTitle" class="subject-input" placeholder="要求(不超过50字)" v-model="prompt" />
                            <img class="subject-voice" v-if="1!=voiceType" src="../images/write/voice-play.png" @click="startTalk(1)"/>
                            <img class="subject-voice" v-if="1==voiceType" src="../images/write/stop.png" @click="stopTalk(1)"/>
                        </div>
                    </div> -->
                    <div class="subject">
                        <div class="field-label">
                            <span class="tit_text">要求</span>
                            <!-- <span class="first_span_img">*</span> -->
                        </div>
                        <div class="subject-title">
                            <!-- <textarea id="voiceSubjectTitle" class="subject-input" placeholder="要求(不超过50字)" v-model="prompt" ></textarea> -->
                            <textarea id="voicePrompt" :readonly="1==voiceType" cols="2" rows="3" class="area-input" placeholder="要求(不超过50字)" v-model="prompt"></textarea>
                            <div class="img-div area-voice active-brightness" v-if="1!=voiceType" @click="startTalk(1)">
                                <img class="subject-voice" src="../images/write/voice-play.png" />
                            </div>
                            <div class="img-div area-voice active-brightness" v-if="1==voiceType" @click="stopTalk(1)">
                                <img class="subject-voice"  src="../images/write/stop.png" />
                            </div>
                        </div>
                    </div>
                    <!-- 生辰PPT按钮 -->
                    <div class="bottom">
                        <van-button class="submit-btn" style="background-color: #D5C69F" @click="nextStep()">生成PPT大纲</van-button>
                    </div>
                </div>
                <!-- 生成内容 -->
                <div v-if="currentStep == 2" ref="step2Ref" class="step2">
                    <div class="step2-main">
                        <div class="step2-f" v-if="isOutLineContent" ref="outlineRef">
                            <!-- <van-popover
                            v-model="showPopover"
                            overlayClassName="my-popover"
                            :actions="actions"
                            placement="top"
                            theme="dark"
                            > -->
                            <!-- <div id="edit-popover" >
                                <div clickable @click="handleEditPContent">编辑</div>
                                <div class="edit-arrow"></div>
                            </div> -->
                            
                            <!-- <template #reference> -->
                                    <div id="step3-mdBody" class="step2-content markdown-body" v-html="outLineContent"></div>
                                    <van-divider
                                    :style="{ color: '#999', borderColor: '#999', padding: '0 16px' }"></van-divider>
                                    <!-- <van-col class="pptBtn_ppt ml3 active-brightness" v-if="outLineContentEnd" @click="nextStep()">
                                        <van-button class="submit-btn" style="background-color: #D5C69F" @click="nextStep()">生成PPT大纲</van-button>
                                    </van-col> -->
                                    
                                    <!-- <van-col class="pptBtn_ppt2 ml3" v-if="isResPPt"></van-col> -->
                                    <van-row type="flex" justify="end" class="ppt_Btn">
                                        <van-col class="pptBtn_edit active-brightness" @click="editoutLineContent(1)"></van-col>
                                      </van-row>
                            <!-- </template> -->
                            <!-- </van-popover> -->
                            
                        </div>
                    </div>
                    <!-- 生辰PPT按钮 -->
                    <div class="bottom2">
                        <van-button class="submit-btn" style="background-color: #D5C69F" @click="nextStep()">生成PPT大纲内容</van-button>
                    </div>
                </div>
                <!-- 生成大纲内容 -->
                <div v-if="currentStep == 3" ref="step3Ref" class="step2">
                    <div class="step2-main">
                        <div class="step2-f" v-if="isOutLineContentText" ref="outlineContentRef">
                            <!-- <van-popover
                            v-model="showPopover"
                            overlayClassName="my-popover"
                            :actions="actions"
                            placement="top"
                            theme="dark"
                            > -->
                            <!-- <div id="edit-popover" >
                                <div clickable @click="handleEditPContent">编辑</div>
                                <div class="edit-arrow"></div>
                            </div> -->
                            
                            <!-- <template #reference> -->
                                    <div id="step3-mdBody" class="step2-content markdown-body" v-html="outLineContentText"></div>
                                    <van-divider
                                    :style="{ color: '#999', borderColor: '#999', padding: '0 16px' }"></van-divider>
                                    <van-col class="pptBtn_ppt ml3 active-brightness" v-if="!isResPPt && outLineContentTextEnd" @click="nextStep()"></van-col>
                                    <van-col class="pptBtn_ppt2 ml3" v-if="isResPPt"></van-col>
                                    <van-row type="flex" justify="end" class="ppt_Btn">
                                        <van-col class="pptBtn_edit active-brightness" @click="editoutLineContent(0)"></van-col>
                                    </van-row>
                            <!-- </template> -->
                            <!-- </van-popover> -->
                            
                        </div>
                        <div v-if="isResPPt">
                            <div class="program-result">
                                <div class="program">
                                    <div class="program-item" v-if="pptResult.id" @click="preview(pptResult)">
                                        <div class="program-item-left" >
                                            <!-- <img :src="'../images/ppt.png'" /> -->
                                            <div class="program-item-left-back"></div>
                                        </div>
                                        <div class="program-item-right">
                                            <div class="right-title">{{ pptResult.name }}</div>
                                            <div class="right-desc">PPT<span
                                                    style="margin: 0 0.1rem 0 0.1rem;"></span>{{pptResult.fileSize}}</div>
                                        </div>
                                    </div>
                                    <div class="program-item" v-else>
                                        <div class="program-item-left">
                                            <img :src="'../images/ppt.png'" />
                                        </div>
                                        <div class="program-item-right2">
                                            <img src="../../../image/loading2.gif" />
                                            <div class="loading-tip">文件正在生成中</div>
                                        </div>
                                    </div>
                                    <van-divider
                                        :style="{ color: '#999', borderColor: '#999', padding: '0 16px' }"></van-divider>
                                    <van-row type="flex" justify="end">
                                        <div class="program-btn">
                                            <van-col style="margin-right: 10px;">
                                                <div v-if="pptResult.id" class="send-mail-back active-brightness" @click="sendMail(pptResult)"></div>
                                            </van-col>
                                            <van-col style="margin-right: 10px;">
                                                <div v-if="pptResult.id" class="sync-back active-brightness" @click="syncToInner(pptResult)"></div>
                                            </van-col>
                                            <van-col style="margin-right: 10px;">
                                                <div v-if="pptResult.id" class="share-back active-brightness" @click="share(pptResult)"></div>
                                            </van-col>
                                        </div>
                                    </van-row>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 生成大纲 -->
                <div v-if="currentStep == 4" class="step1">
                    <div class="ppt-subject" >
                        <div class="field-label">
                            <span class="tit_text">文件标题</span><span class="first_span_img">*</span>
                        </div>
                        <div class="subject-title">
                            <input class="subject-input" placeholder="示例：xxxx项目" v-model="pptForm.title" />
                        </div>
                    </div>
                    <div class="model-area">
                        <div class="field-label" style="margin-top: 0.2rem;">
                            <span class="tit_text">选择模板</span><span class="first_span_img">*</span><span class="max-tip">（向左滑动选择更多模板）</span>
                        </div>
                        <div class="gray_text">专用模板</div>
                        <div class="ppt-item-list m-scroll" @scroll="handleSpecialScroll">
                            <div v-for="(item, index) in specialList" :key="index" 
                                :class="['ppt-item',pptForm.curModelId == item.id ? 'm-selected':'']" @click="selModel(item)">
                                <img v-if="pptForm.curModelId == item.id ? true : false" 
                                    class="m-list-item-radio"  src="../images/write/xuanzhong.png" alt="">
                                <img :src="item.coverUrl" :class="['model-img', pptForm.curModelId == item.id ? 'ppt-model-selected':'']"/>
                            </div>
                        </div>
                        <div class="gray_text" style="margin-top: 0.2rem;">通用模板</div>
                        <div class="ppt-item-list m-scroll" id="general" @scroll="handleGeneralScroll">
                            <div v-for="(item, index) in generalList" :key="index" 
                                :class="['ppt-item',pptForm.curModelId == item.id ? 'm-selected':'']" @click="selModel(item)">
                                <img v-if="pptForm.curModelId == item.id ? true : false" 
                                    class="m-list-item-radio"  src="../images/write/xuanzhong.png" alt="">
                                <img :src="item.coverUrl" :class="['model-img', pptForm.curModelId == item.id ? 'ppt-model-selected':'']"/>
                            </div>
                        </div>
                    </div>
                    <div class="ppt-model-bottom">
                        <van-button class="ppt-submit-btn" @click="OutlineCreatePPTX()">PPT辅助生成</van-button>
                    </div>
                </div>

            </div>
                <!-- 编辑大纲 -->
                <van-action-sheet class="p-edit-sheet" v-model:show="canEditContent" title="编辑大纲" closeable>
                    <div class="p-edit-item">
                        <div class="p-edit-cont markdown-body" id="mdBody" contenteditable="true" v-html="editPContent">
                            <!-- {{editPContent}} -->
                        </div>
                        
                        <div class="p-edit-foot">
                            <van-button type="default" class="p-edit-btn-cancle" @click="cancleEdit()">取消</van-button>
                            <van-button class="p-edit-btn-confirm" @click="confirmEdit()">确定</van-button>
                        </div>
                    </div>
                    
                </van-action-sheet>
        </div>
    </div>

    <script src="../js/outlinePPT.js"></script>
</body>

</html>